<template>
    <my-layout>
       <template  v-slot:header>
             <el-input v-model='query.name' placeholder="输入产品名字查询" size='small'/>
             <el-button type="primary" size='small' @click='queryEvt'>查询</el-button>
             <el-button type="primary" size='small' @click='editEvt(row)'>新增</el-button>
        </template>
            <el-table
                  :data="tableData"
                  style="width: 100%"
                  size='small'
                  height='100%'>
                  <el-table-column prop="state" label="状态" width="180" fixed='left' align='center'>
                    <template v-slot="{row :{ state }}">
                      <div v-mystate='state'/>
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label="产品名字" width="200" align='center'/>
                  <el-table-column prop="type" label="类型" width="180" align='center'>
                    <template v-slot="data">
                        <div>
                          {{data.row.type | typeFilter(medicalType)}}
                        </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="level" label="级别" width="180" align='center'>
                    <template v-slot='data'>
                      <div>
                        {{data.row.level | typeFilter(levelType)}}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="brand" label="品牌" width="180" align='center'/>
                  <el-table-column prop="place" label="产地" width="300" align='center'/>
                  <el-table-column prop="price" label="售价" width="180" align='center'/>
                  <el-table-column prop="remark" label="备注" width="300" :show-overflow-tooltip='true' align='center'/>
                  <el-table-column  label="操作" width="180" fixed='right' align='center'>
                    <template slot-scope="{row}">
                      <el-button type="text" size="small" @click='detailEvt(row)'>详情</el-button>
                      <el-button type="text" size="small" v-if="row.state === 'new'" @click='editEvt(row)'>编辑</el-button>
                      <el-popconfirm :title="`确定要删除【${row.name}】删除后，不能恢复哦`">
                        <template #reference>
                          <el-button type="text" size="small" style='margin:0 6px' v-if="row.state === 'new'">删除</el-button>
                        </template>
                      </el-popconfirm>
                      <el-button type="text" size="small" v-if="row.state === 'new'" @click='approverEvt(row)'>审批</el-button>
                      <el-button type="text" size="small" v-if="row.state === 'finish'"  @click='changeStateEvt(row)'>上架</el-button>
                      <el-button type="text" size="small" v-if="row.state === 'sales'"  @click='changeStateEvt(row)'>下架</el-button>
                      
                    </template>
                  </el-table-column>
              </el-table>
        <template v-slot:footer>
            <el-pagination
                :page-sizes="[20,50,100,150]"
                :page-size="query.size"
                small
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :current-page='query.page'
                @size-change='sizeChange'
                @current-change='currentChange'>
              </el-pagination>
          </template>
        <ApproverList v-model='show'  :dataId='dataId'/>
   </my-layout>
   
</template>

<script>
import { productListApi,dictListApi,productApproveApi } from '../../../apis/productApi'
import ApproverList from './approverList.vue'
export default {
    components:{
      ApproverList
    },
    data(){
        return{
            tableData: [],
            total:0,
            query:{
              page:1,
              size:20,
            },
            changeTimer:null,
            medicalType:[],
            levelType:[],
            changeState:{
              state:"1"
            },
            show:false,
            dataId:{id:''}
        }
    },
    async mounted(){

      Promise.all(
        [
          dictListApi('MEDICAL'),
           dictListApi('PRODUCT_LEVEL')
        ]
      ).then(d=>{
        if(d[0].code===200) this.medicalType = d[0].data.rows
        if(d[1].code===200) this.levelType = d[1].data.rows
      })
      this.getList()


    },
    directives:{
      mystate(el,{value}){
        let obj = {
          sales:{text:'在售',cls:'product-state sale'},
          finish:{text:'已下架',cls:'product-state'},
          new:{text:'新建',cls:'product-state new'},
        }
        el.setAttribute('class', obj[value].cls)
        el.innerHTML = obj[value].text
      }
    },
    methods: {
      detailEvt(data) {
            this.$router.push('/product/detail?id='+data.id)
        },
      editEvt(data){
            console.log(data)
            this.$router.push('/product/edit')
      },
      async queryEvt(){
        this.query.page = 1
        this.getList()
      },
      //定义获取数据的方法
      async getList(){
        let result = await productListApi(this.query)
        if(result.code === 200 ){
          this.tableData = result.data.rows
          this.total = result.data.count
        }
      },
      sizeChange(size){
        this.query.size = size
        if(this.changeTimer) clearTimeout(this.changeTimer)
        this.changeTimer = setTimeout(() => {
          this.getList()
        })
      },
      currentChange(page){
        this.query.page = page
         if(this.changeTimer) clearTimeout(this.changeTimer)
        this.changeTimer = setTimeout(() => {
          this.getList()
        })
      },
      async changeStateEvt(data){
        this.changeState.goods_id = data.id
        let userInf = this.$store.getters['common/userInfo']
        this.changeState.user_id = userInf.id
        this.changeState.user_name = userInf.name

        data.state==='finish'? data.state='sales': data.state='finish' 
        data.state ==='finish'?  this.changeState.remark = '下架商品' :this.changeState.remark = '上架商品'

        await productApproveApi(this.changeState)

         this.$message({
          message:  data.state ==='finish'?'下架成功': '上架成功',
          type: 'success'
        })
      },
      approverEvt(it){
        this.show = true
        this.dataId.id = it.id
      }

}
}
</script>

<style lang="less" scoped>
    .el-input{
      width:220px;
  }
  .product-state{
    &::before{
      content:"";
      display: inline-block;
      border-radius:6px;
      width: 6px;
      height: 6px;
      background: #999;
      margin-left:6px;
      margin-right:6px;
      vertical-align: middle;
    }
    &.sale{
      color:#4264bc;
      &::before{
        background: #4264bc;
      }
    }
    &.new{
      color:#20a419;
      &::before{
        background: #20a419;
      }
    }
  }
  
 

</style>



